<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>分类管理</title>
    <link rel="stylesheet" href="/static/admin/component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="cate-table" lay-filter="cate-table"></table>
    </div>
</div>

<script type="text/html" id="cate-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="toolbar_add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
</script>

<script type="text/html" id="cate-tools">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="tool_edit"><i
            class="layui-icon layui-icon-edit"></i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="tool_remove"><i
            class="layui-icon layui-icon-delete"></i>
    </button>
</script>

<script src="/static/admin/component/layui/layui.js"></script>
<script src="/static/admin/component/pear/pear.js"></script>
<script src="/static/js/main.js"></script>
<script src="/static/js/api.js"></script>
<script>
  layui.use(['table', 'form', 'jquery', 'common'], function() {
    let table = layui.table;
    let form = layui.form;
    let $ = layui.jquery;
    let common = layui.common;

    let cols = [
      [
        {
          type: 'checkbox',
        },
        {
          title: 'ID',
          field: 'id',
          width: 60,
        },
        {
          title: '分类名',
          field: 'name',
          align: 'center',
        },
        {
          title: '操作',
          toolbar: '#cate-tools',
          align: 'center',
          width: 130,
        },
      ],
    ];

    table.render({
      elem: '#cate-table',
      url: '/admin/cate',
      page: true,
      cols: cols,
      skin: 'line',
      toolbar: '#cate-toolbar',
      defaultToolbar: [
        {
          title: '刷新',
          layEvent: 'refresh',
          icon: 'layui-icon-refresh',
        }, 'filter', 'print', 'exports'],
    });
    table.on('toolbar(cate-table)', function(obj) {
      if (obj.event === 'toolbar_add') {
        window.add();
      } else if (obj.event === 'refresh') {
        window.refresh();
      } else if (obj.event === 'batchRemove') {
        window.batchRemove(obj);
      }
    });

    table.on('tool(cate-table)', function(obj) {
      if (obj.event === 'tool_remove') {
        window.remove(obj);
      } else if (obj.event === 'tool_edit') {
        window.edit(obj);
      }
    });

    form.on('submit(user-query)', function(data) {
      table.reload('user-table', {
        where: data.field,
      });
      return false;
    });

    form.on('switch(user-enable)', function(obj) {
      layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
    });

    window.add = function() {
      layer.open({
        type: 2,
        title: '新增',
        shade: 0.1,
        area: [common.isModile() ? '100%' : '80%', common.isModile() ? '100%' : '70%'],
        content: '/admin/cate_add',
      });
    };

    window.edit = function(obj) {
      /*
      * 编辑表单展现的方式
      *   1. 单页应用程序。 提前定义好一个表单，但是不显示。当点击更新按钮之后再显示表单
      *   2. 多页应用程序。 直接请求一个新的视图接口，返回一个新的页面进行更改。
      * 多页应用程序 数据展示方式
      *   1. 服务器把表单内的数据渲染好了之后再返回给前端（服务器渲染 ssr）
      *   2. 服务器只返回静态表单，前端重新发送一个获取数据的请求，拿到数据之后通过 js 渲染到表单（客户端 csr）
      * */
      layer.open({
        type: 2,
        title: '修改',
        shade: 0.1,
        area: ['500px', '400px'],
        content: `/admin/cate_edit?cid=${obj.data.id}`,
      });
    };

    window.remove = function(obj) {
      console.log(obj);
      layer.confirm('确定要删除该分类', {
        icon: 3,
        title: '提示',
      }, function(index) {
        layer.close(index);
        // loading 加载按钮
        let loading = layer.load();
        api_delete(`/api/v1/cate/${obj.data.id}`).then(function(ret) {
          layer.close(loading);
          if (!ret.code) {
            // 请求成功
            layer.msg(ret.message, {icon: 1});
            setTimeout(function() {
              window.refresh();
            }, 1500);
          } else {
            layer.msg(ret.message, {icon: 2});
          }
        });

      });
    };

    window.batchRemove = function(obj) {

      var checkIds = common.checkField(obj, 'userId');

      if (checkIds === '') {
        layer.msg('未选中数据', {
          icon: 3,
          time: 1000,
        });
        return false;
      }

      layer.confirm('确定要删除这些用户', {
        icon: 3,
        title: '提示',
      }, function(index) {
        layer.close(index);
        let loading = layer.load();
        $.ajax({
          url: MODULE_PATH + 'batchRemove/' + ids,
          dataType: 'json',
          type: 'delete',
          success: function(result) {
            layer.close(loading);
            if (result.success) {
              layer.msg(result.msg, {
                icon: 1,
                time: 1000,
              }, function() {
                table.reload('user-table');
              });
            } else {
              layer.msg(result.msg, {
                icon: 2,
                time: 1000,
              });
            }
          },
        });
      });
    };

    window.refresh = function(param) {
      table.reload('cate-table');
    };
  });
</script>
</body>
</html>